<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
        <component is="MaterialFile" fileType="image" ref="imagePanel" @change="materialCount"></component>
      </el-tab-pane>
      <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
        <component is="MaterialFile" fileType="voice" ref="voicePanel" @change="materialCount"></component>
      </el-tab-pane>
      <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
        <component is="MaterialFile" fileType="video" ref="videoPanel" @change="materialCount"></component>
      </el-tab-pane>
      <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
        <material-news ref="newsPanel" @change="materialCount"></material-news>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import MaterialFile from "./material-file";
  import MaterialNews from "./material-news";
  import {materialCount} from "@/api/wx/assets";

  export default {
    name: "assets",
    data() {
      return {
        activeTab: 'image',
        assetsCount: {
          imageCount: '..',
          videoCount: '..',
          voiceCount: '..',
          newsCount: '..'
        }
      };
    },
    components: {
      MaterialFile,
      MaterialNews
    },
    mounted() {
      this.materialCount();
    },
    methods: {
      handleTabClick(tab, event) {
        this.$nextTick(() => {
          this.$refs[tab.name + 'Panel'].init()
        })
      },
      materialCount() {
        materialCount().then(response => {
          this.assetsCount = response.data;
        });
      }
    }
  }
</script>

<style scoped>

</style>
